<template>
  <a-row class="tags-view-container">
    <!--  固定首页tag  -->
    <a-tabs
      v-model:activeKey="selectedKey"
      class="tag-view-item"
      @tabClick="onClickTab"
    >
      <a-tab-pane :key="'/' + HOME_ROUTE_NAME">
        <template #tab>
          <span class="homeTab">{{ $t(`route.${HOME_ROUTE_NAME}`) }}</span>
        </template>
      </a-tab-pane>
      <a-tab-pane v-for="item in tagsViewList" :key="item.fullPath">
        <template #tab>
          <span>{{ $t(`route.${item.meta.title}`) }}</span>
          <Icon
            @click.stop="deleteTag(item)"
            type="CloseOutlined"
            class="icon"
          ></Icon>
        </template>
      </a-tab-pane>
    </a-tabs>
  </a-row>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import Icon from '@/components/Icon/index.vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { HOME_ROUTE_NAME } from '@/router/constants'
const route = useRoute()
const selectedKey = ref(route.fullPath)
const store = useStore()
const tagsViewList = computed(() => {
  return store.getters.tagsViewList
})

watch(
  route,
  (to) => {
    selectedKey.value = to.fullPath
  },
  { immediate: true }
)

// 跳转页面
const router = useRouter()
const onClickTab = (path) => {
  selectedKey.value = path
  router.push({
    path: path
  })
}

// 直接关闭
const deleteTag = (item, closeALl) => {
  // 执行单个删除
  const index = tagsViewList.value.findIndex((fitem) => {
    return fitem.fullPath === item.fullPath
  })
  let pathName = ''
  if (item && !closeALl) {
    if (item.fullPath === route.fullPath) {
      // 关闭当前的tag，但是是最后一个tag
      if (tagsViewList.value.length === 1) {
        pathName = HOME_ROUTE_NAME
      } else {
        const isLast = tagsViewList.value.length - 1 === index
        if (isLast) {
          // 如果是最后一个，跳转到旁边的那个
          pathName = tagsViewList.value[index - 1].name
        } else {
          pathName = tagsViewList.value.at(-1).name
        }
      }
    }
    // 如果不是删除的自身，就直接删除那个删除的
  } else if (!item && closeALl) {
    // 关闭所有tag
  }
  router.push({
    name: pathName
  })
  setTimeout(() => {
    store.commit('app/removeTagsView', item)
  }, 100)
}
</script>
<style scoped lang="scss">
@import '@/styles/variables.module.scss';
.tags-view-container {
  height: 34px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  align-content: center;
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  -webkit-user-select: none;
  user-select: none;
  background: #fff;
  width: 100%;
  .icon {
    margin-left: 8px;
    font-size: 10px;
  }
}

.homeTab {
  min-width: 100px;
}

// 覆盖 ant desing vue 的tab样式
:deep(.ant-tabs-nav) {
  margin: 0;
  padding: 0 0 2px 0;
}

:deep(.ant-tabs-nav::before) {
  border-bottom: 1px solid #ffffff;
}

:deep(.ant-tabs-tab) {
  padding: 5px 8px 3px 10px;
  border-radius: 6px;
}

:deep(.ant-tabs-tab-active) {
  background-color: #eeeeee;
  .smart-page-tag-close {
    color: $themeColor;
  }
}
:deep(.ant-tabs-nav .ant-tabs-tab:hover) {
  background-color: #eeeeee;
  .smart-page-tag-close {
    color: $themeColor;
  }
}
</style>
